<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body,
        html {
            height: 100%;
            background: linear-gradient(to right,#67B26F,#4ca2cd);
        }

        span {
            width: 40px;
            height: 40px;
            background-color: rgb(15, 127, 167);
            color: white;
            border-radius: 50%;
            display: block;
            text-align: center;
            line-height: 40px;
            font-size: 24px;
            font-weight: bold;
            position: absolute;
            top: 0;
            left: 0
        }
    </style>
</head>

<body>
    <p>得分：<b>0</b></p>
    <script>
        /* 实现思路：
            a、实现控制一个字符向下掉落
                分析：由于字符是逐步向下掉落 肯定是需要使用定时器,定时器做什么？字符是页面上一个元素，向下走就是控制元素的定位
                1、生成出一个标签 能存储随机的一个字符
                    1、使用document.creatElement创建span标签
                    2、设置随机字符,生成的字符可以是0-9 a-z ,这两组可以使用的字符没有规律，随机只能使用随机数，可以将可以使用的字符放到一个字符串中，然后随机生成下标。最后通过随机的下标就可以取到字符
                    3、将span标签添加到页面上
                    4、控制span标签左侧的距离(也需要随机)
                    5、开始使用定时器 控制top值,当span标签接触到底部，需要控制span消失.当span标签到底部消失后。从新来一个字符掉落(就是将步骤a在来一次)
            b、当用户输入的内容与掉落的字符相同，重新掉落字符 然后得分加1
                1、可以通过键盘按下事件获取到按下的字符 与掉落的比较 如果相同 得分+1，从新在生成一个span标签控制下落(继续将a步骤再来一次) */

        var timer;
        var char;
        var res;
        function randomNum(min, max) {
            return parseInt(Math.random() * (max + 1 - min)) + min;
        }
        // 随机生成字符串
        function strSet() {
            var str = 'qwerhjkdsocmlsuhdjd12345677899';
            res=str[randomNum(0, str.length - 1)]
            return res;
        }
        console.log(strSet())
        // 使用函数创建标签
        function spanSet() {
            var spanone = document.createElement('span')
            spanone.innerHTML = strSet();
            char = document.body.appendChild(spanone)
            var maxWidth = document.body.clientWidth;
            var maxHeight = document.body.clientHeight;
            console.log(maxHeight);
            char.style.left = randomNum(100, maxWidth - 40) + 'px';
            timer = setInterval(function () {
                var top = parseInt(window.getComputedStyle(char).top);
                if(top >= maxHeight-40){
                    clearInterval(timer);
                    document.body.removeChild(char);
                    // spanSet()
                    alert('game over');
                }else{
                    char.style.top=top+50+'px';
                }
            }, 100)
        }
        spanSet()
        // 键盘事件
        document.onkeypress=function(e){
            var event=e||window.event;
            // console.log(event.key,res)
            var key=event.key.toLowerCase();
            console.log(key)
            if(key==res){
                clearInterval(timer);
                document.body.removeChild(char);
                spanSet();
                document.querySelector('b').innerHTML=parseInt(document.querySelector('b').innerHTML)+1;
            }
        }
    </script>
</body>

</html>